<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新华书店_首页</title>
</head>
<link rel="stylesheet" href="./css/index/index.css">

<body>
    <div class="container">
        <header class="header">
            <!-- 登录，注册 -->
            <div class="top_header">
                <div class="top_header_box">
                    <div class="left">
                        <span>晚上好！</span>
                        <span>找到中意的书了吗? </span>
                        <a href="#">请登录</a>
                        <a href="#">免费注册</a>
                    </div>
                    <ul class="right">
                        <li class="right_item"><a class="right_a" href="#">我的学习</a></li>
                        <li class="right_item"><a class="right_a" href="#"><i>图标 </i>个人中心</a></li>
                        <li class="right_item"><a class="right_a" href="#">我的订单</a></li>
                        <li class="right_item"><a class="right_a" href="#">客户服务</a></li>
                        <li class="right_item"><a class="right_a_none" href="#">手机新华</a></li>
                    </ul>
                </div>

            </div>
            <!-- logo，搜索，全部商品分类 -->
            <div class="eve_row">
                <!-- logo,搜索 -->
                <div class="eve_col_cu">
                    <div class="logo_box">
                        <img src="//img5.xinhuashudian.com/images/2024/01/29/76769cf3-6530-4665-b746-0b4eec40b952.gif?x-oss-process=image/format,webp"
                            alt="">
                    </div>
                    <div class="eve-component">
                        <input class="search-input" type="text" placeholder="品读中国：风物与人文">
                        <span class="input-group-btn">
                            <button class="search-btn">
                                <i>图标</i>
                            </button>
                        </span>
                    </div>
                    <!-- 购物车 -->
                    <div class="shopping-cart-count">
                        <div class="count-wrapper">
                            <i>图标</i>
                            购物车
                            <span class="count-text ">0</span>
                            件
                            <i>></i>
                        </div>
                    </div>
                </div>
                <!-- 全部商品分类 -->
                <div class="eve-col-cu">
                    <div class="eve-row">
                        <!-- 全部商品分类 -->
                        <div class="navbar-title">
                            <a href="#" class="all-category-show">
                                <i class="ml">图标</i>
                                全部商品分类
                            </a>
                            <!-- 二级列表 -->
                            <ul class="category-list">
                                <li class="category-list-item">
                                    <a href="#">
                                        <span>文学艺术</span>
                                    </a>
                                    <ul class="category-keyword">
                                        <li class="keyword-item">小说</li>
                                        <li class="keyword-item">文学</li>
                                        <li class="keyword-item">艺术</li>
                                    </ul>
                                </li>
                                <li class="category-list-item">
                                    <a href="#">
                                        <span>文学艺术</span>
                                    </a>
                                    <ul class="category-keyword">
                                        <li class="keyword-item">小说</li>
                                        <li class="keyword-item">文学</li>
                                        <li class="keyword-item">艺术</li>
                                    </ul>
                                </li>
                                <li class="category-list-item">
                                    <a href="#">
                                        <span>文学艺术</span>
                                    </a>
                                    <ul class="category-keyword">
                                        <li class="keyword-item">小说</li>
                                        <li class="keyword-item">文学</li>
                                        <li class="keyword-item">艺术</li>
                                    </ul>
                                </li>
                                <li class="category-list-item">
                                    <a href="#">
                                        <span>文学艺术</span>
                                    </a>
                                    <ul class="category-keyword">
                                        <li class="keyword-item">小说</li>
                                        <li class="keyword-item">文学</li>
                                        <li class="keyword-item">艺术</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!-- 导航 -->
                        <ul class="navs">
                            <li class="navs_item">首页</li>
                            <li class="navs_item">主题出版</li>
                            <li class="navs_item">中版书房</li>
                            <li class="navs_item">少儿童书</li>
                            <li class="navs_item">生活用品</li>
                            <li class="navs_item">食品茶饮</li>
                            <li class="navs_item">食品茶饮</li>
                            <li class="navs_item">食品茶饮</li>
                            <li class="navs_item">食品饮</li>
                            <li class="navs_item">食品茶 食品饮</li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>

</html>